<template>
  <div class="container">
    <div class="wrap">
      <mpvue-echarts :echarts="echarts" :onInit="onInit" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/dist/echarts.min'
import mpvueEcharts from 'mpvue-echarts'

function initChart (canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  })
  canvas.setChart(chart)

  var option = {
    title: {
      text: 'Dispersion of house price\naccording to the number of bedrooms',
      x: 'center',
      y: 10,
      textStyle: {
        color: '#3259B8',
        fontSize: 16,
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '15%',
      right: '10%'

    },
    xAxis: {
      type: 'category',
      data: ['1 bedroom', '2 bedrooms', '3 bedrooms', '4 bedrooms', '5 bedrooms', '6 bedrooms'],

      nameTextStyle: {
        color: '#3259B8',
        fontSize: 14

      },
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#3259B8'
        }
      },
      splitLine: {
        show: false
      }
    },

    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#3259B8',
        fontSize: 14
      },
      axisLabel: {
        formatter: '{value}\nCNY/㎡'
      },
      axisLine: {
        lineStyle: {
          color: '#3259B8'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#A7BAFA'
        }
      }

    },
    series: [{
      name: 'boxplot',
      type: 'boxplot',
      data: [
        [30645,
          53490,
          66640.5,
          89123,
          159949
        ],
        [19464,
          46454,
          59139,
          83479,
          179440
        ],
        [16704,
          46041,
          60155,
          86818,
          159980
        ],
        [21543,
          41619.75,
          58819.5,
          87540,
          159978
        ],
        [15202,
          35757,
          44721,
          59916.5,
          159825
        ],
        [22158,
          34754.5,
          49718,
          71637,
          139972
        ]
      ],
      itemStyle: {
        normal: {
          borderColor: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: '#F02FC2' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#3EACE5' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          },
          borderWidth: 2,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(240,47,194,0.7)' // 0% 处的颜色
            }, {
              offset: 1,
              color: 'rgba(62,172,299,0.7)' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        }
      },
      tooltip: {
        formatter: function (param) {
          return [
            'Upper: ' + param.data[5] + ' CNY/㎡',
            'Q3: ' + param.data[4] + ' CNY/㎡',
            'Median: ' + param.data[3] + ' CNY/㎡',
            'Q1: ' + param.data[2] + ' CNY/㎡',
            'Lower: ' + param.data[1] + ' CNY/㎡'
          ].join('<br/>')
        }
      }
    }

    ]
  }

  chart.setOption(option)
  return chart
}

export default {
  data () {
    return {
      echarts,
      onInit: initChart
    }
  },

  components: {
    mpvueEcharts
  },

  onShareAppMessage () {}
}
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 300px;
}
</style>
